.network
  margin 6px 6px 4px 6px
  position relative
  box-shadow 0px 4px 8px var(--ghostY)
  border-radius 27px
  background var(--ghostAZ)
  box-shadow 0px 4px 6px var(--ghostY)
  border-bottom 2px solid var(--ghostZ)

  .chainModules
    padding-bottom 0px

  // .networkActive
  //   position relative
  //   display flex
  //   align-items space-between
  //   width 100%
  //   box-sizing border-box
  //   height 74px

  //   .chainBadge
  //     position absolute
  //     left 16px
  //     top 18px
  //     border-radius 16px
  //     background var(--ghostB)
  //     box-sizing border-box
  //     display flex
  //     justify-content center
  //     align-items center
  //     color var(--outerspace)

  //     img
  //       max-height 22px
  //       max-width 22px
  //       color var(--outerspace)

  //   .networkName
  //     position absolute
  //     left 66px
  //     right 100px
  //     top 1px
  //     bottom 1px
  //     font-size 18px
  //     text-align left
  //     font-weight 300
  //     padding-left 0px
  //     font-family 'MainFont'
  //     display flex
  //     align-items center

// .signerPermissionToggle
//   // position absolute
//   // right 16px
//   // top 50%
//   margin-top -9px
//   height 18px
//   width 38px
//   border-radius 12px

//   .signerPermissionToggleSwitch
//     position absolute
//     top 2px
//     left 2px
//     bottom 2px
//     width 14px
//     border-radius 10px


// .signerPermissionToggleOn
//   background var(--good)
//   .signerPermissionToggleSwitch
//     position absolute
//     transform translateX(20px)

.phaseNetworkLine
  position relative
  height 84px

.localSettings
  position absolute
  top 0px
  right 0px
  bottom 0px
  left 0px
  display flex
  justify-content center
  flex-direction column
  transition var(--standardFast)
  transform translateZ(0)  
  
  .customInput
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    width 100%
    height 100%
    border none 
    outline none
    background transparent
    text-align center
    font-size 16px
    font-weight 300
    color var(--outerspace)
    font-family 'MainFont'

    div 
      z-index 3
      display flex
      justify-content center
      align-items center

  .phaseNetworkRemove:hover
    background var(--bad)
    
  .phaseNetworkSubmit
    position absolute
    right 0
    bottom 1px
    top 45px
    width 60px

    svg
      position relative
      z-index 2
    
  .phaseNetworkName
    position absolute
    top 1px
    left 0px
    right 160px 
    bottom 40px

    input 
      font-size 22px
      text-align left
      font-weight 300

  .phaseNetworkSymbol
    position absolute
    top 0
    bottom 40px
    right 0px 
    width 60px

    input 
      font-size 16px
      font-family 'FiraCode'

  .phaseNetworkId
    position absolute
    right 80px
    top 0
    bottom 40px
    width 60px

    input 
      font-size 16px
      font-family 'FiraCode'

  .phaseNetworkExplorer
    position absolute
    right 80px
    left 0
    top 45px
    bottom 0px

    input 
      text-align left


  .localSettingsAddNetwork
    position absolute
    right 145px
    display flex
    justify-content center
    align-items center
    height 26px
    z-index 9999999
    border-radius 13px
    height 26px
    font-weight 300
    width 26px
    font-size 23px
    text-transform uppercase
    background var(--ghostD)
    overflow hidden
    box-shadow cardDrop, 0px 2px 1px var(--thin)
    padding 0px 0px 0px 0px
    transition var(--standard), 0s linear background
    transform translateZ(0)
    cursor pointer
    
  .localSettingsAddNetwork:hover
    background var(--ghostD)

  .localSettingsWrapFadeTop
    position absolute
    top 0
    left 0
    right 0
    height 140px
    pointer-events none
    z-index 5

  .localSettingsWrapFadeBot
    position absolute
    bottom 0
    left 0
    right 0
    height 140px
    pointer-events none
    z-index 5

  .localSettingsWrap
    overflow-x hidden
    overflow-y scroll
    position relative
    z-index 2

  .localSettingsTitle:before
    content ''
    position absolute
    bottom -2px
    right 10px
    left 10px
    height 4px
    border-radius 2px
    background var(--thin)

  .localSettingsTitle
    position relative
    display flex
    align-items flex-start
    height 30px
    font-size 26px
    font-weight 300
    padding 0px 17px 17px 17px
    margin 67px 0px 0px 0px

    .localSettingsTitleText
      margin-top -5px

.signerSetting
  display flex
  justify-content center
  align-items center
  padding 0px 0px 20px 0px
  flex-direction column

.settingsTitle
  width 100%
  display flex
  justify-content center
  align-items center
  padding 20px 0px 20px 0px
  background rgba(255, 255, 255, 0.8)

.settingsItems
  width 100%
  display flex
  justify-content center
  align-items center
  padding 20px 0px 20px 0px
  background rgba(0,0,50,0.1)
  flex-direction column

.settingsItem
  width 100%
  display flex
  justify-content flex-start
  align-items center
  padding 20px

.discordInvite:hover
  .discordLink
    position relative 
    transform translateY(-2px)
    cursor pointer

.discordInvite
  margin 30px 8px 30px 8px 
  font-size 13px
  font-weight 300
  border-radius 20px
  display flex
  justify-content center
  align-items center
  width calc(100% - 16px)

  .discordLink
    font-weight 300
    padding-left 5px
    transition var(--standardFast)
    transform translateY(0px)

.quitFrame
  padding 0px
  margin-top 30px
  margin-bottom 30px

.connectionLevels
  position relative
  z-index 999999999
  width 100%
  min-width 100%

  .connectionLevel
    position relative

  .connectionTitle
    height 12px
    display flex
    justify-content center
    align-items center
    font-size 8px
    text-transform uppercase
    padding 8px 16px
    letter-spacing 1px
    margin-left -1px
    font-weight 300
    color var(--outerspace08)

.infoContainer
  position relative
  margin 10px 10px 12px 10px
  border-radius 12px
  font-size 14px
  font-weight 300


.chainCurrencyItem
  display flex
  justify-content center
  align-items center
  position relative
  border-radius 12px

.chainCurrencyItemSymbol, .sliceChainIdNumber
  font-size 13px
  font-weight 400

.chainCurrencyItemAt
  margin -2px 8px 0px 8px
  color var(--good)
  font-size 12px
  font-weight 400

.sliceContainer
  background var(--ghostZ)
  position relative
  margin 0px 6px 12px 6px
  border-radius 20px
  padding 3px 0px 3px 0px
  font-size 14px
  font-weight 300

  .sliceContainerClose
    cursor pointer
    height 16px
    display flex
    justify-content center
    align-items center
    border-radius 8px
    color black
    div
      pointer-events none
      position relative
      margin 0px 18px
      top 2px

  .sliceContainerClose:hover
    color var(--white)

  .sliceTileCenter
    justify-content center

  .sliceTile
    cursor pointer
    display flex
    justify-content space-between
    align-items center
    transition var(--standardFast)
    transform translateZ(0)
    transform scale(1)
    background var(--ghostA)
    position relative
    border-radius 16px
    height 64px
    box-sizing border-box
    font-size 12px
    font-weight 300
    *
      pointer-events none

  .sliceTile:first-child
    margin 0px 3px 0px 3px

  .sliceTileHighlight
    background var(--ghostB)

  .sliceTileClickable:hover
    background var(--ghostB)
    box-shadow 0px 2px 2px var(--ghostZ)
    // animation 4s shake ease-in-out infinite alternate

  .sliceTileClickable:active
    transform translateY(0px)
    // animation-name shake-little
    // animation-duration 2s
    // animation-timing-function: ease-in-out
    // animation-iteration-count: infinite
    // box-shadow 0px 1px 1px var(--ghostZ)

.sliceTileConnectionName
  padding 1px 20px 0px 20px
  color var(--outerspace)
  text-transform uppercase
  font-size 14px
  font-weight 400
  letter-spacing 1px

.sliceTileBlock
  display flex
  align-items center
  padding-right 11px
  font-family 'FiraCode'
  font-size 14px
  font-weight 300
  position relative
  top 1px
  bottom 0px

  .sliceTileBlockIcon
    color var(--good)
    padding-right 5px

  .sliceTileChainId
    padding-right 15px

.sliceTileIndicator
  color var(--outerspace)
  cursor pointer
  position absolute 
  top 50%
  margin-top -2px
  left 13px
  bottom 0px
  width 5px
  height 5px
  border-radius 3px
  display flex
  justify-content center
  align-items center
  border-radius 12px
  background var(--good)
  *
    pointer-events none


.sliceTileIndicatorLarge
  color var(--outerspace)
  margin-left 8px
  margin-top 4px
  width 10px
  height 10px
  border-radius 4px
  display flex
  justify-content center
  align-items center
  border-radius 12px
  background var(--good)
  *
    pointer-events none

.sliceTileIndicatorActive
  background var(--goodHighlight)
  box-shadow 0px 0px 4px var(--goodHighlight)

.sliceTileIndicatorGood
  background var(--good)
  box-shadow 0px 0px 4px var(--good)

.sliceTileIndicatorPending
  background var(--pending)
  box-shadow 0px 0px 4px var(--pending)

.sliceTileIndicatorWarning
  background var(--warning)
  box-shadow 0px 0px 4px var(--warning)

.sliceTileIndicatorBad
  background var(--bad)
  box-shadow 0px 0px 4px var(--bad)

.sliceTileChangeChain
  color var(--outerspace)
  cursor pointer
  position absolute 
  top 0px
  right 0px
  bottom 0px
  width 41px
  display flex
  justify-content center
  align-items center
  border-radius 12px
  *
    pointer-events none

.sliceTileChangeChain:hover
  background var(--ghostB)

.sliceTileChangeConnected
  background var(--good)

.sliceChainId
  display flex
  justify-content center
  align-items center
  font-family 'FiraCode'
  font-size 12px
  margin 10px

  .sliceChainIdIcon
    margin-right 6px

.sliceContainer:last-child
  margin 0px 6px 0px 6px

.connectionTitle
  justify-content space-between
  height 26px
  max-height 26px

.connectionOption
  align-items space-between
  transition var(--standard)
  transform translateZ(0)
  padding 8px 16px
  margin 2px
  transform scale(1)

  .connectionOptionToggle
    width 100%
    display flex
    justify-content space-between
    align-items center
    height 25px
    transform translateZ(0)

  .connectionOptionDetails
    transition var(--standard)
    transition-delay 0ms, 0ms
    transition-property height, opacity
    opacity 1
    transform translateZ(0)
    z-index 40
    position relative
    margin-top 0px
    transition var(--standard)
    pointer-events none
    padding 8px 0px

    .connectionOptionDetailsInset
      height 25px
      width 100%
      // color var(--outerspace08)
      display flex
      justify-content space-between
      align-items center
      text-transform uppercase
      font-size 11px
      letter-spacing 1px
      font-weight 400
      // margin 0px -15px -15px -15px
      // padding 0px 15px 15px 15px
      z-index 40

      .connectionOptionStatus
        display flex
        height 25px

        .connectionOptionStatusIndicator
          height 20px
          margin-top 5px
          margin-right 14px
          display flex
          align-items center
          div
            width 11px
            height 11px
            border-radius 5.5px
        .connectionOptionStatusIndicatorGood
          background var(--good)
        .connectionOptionStatusIndicatorBad
          background var(--bad)
        .connectionOptionStatusIndicatorPending
          background var(--pending)
        .connectionOptionStatusIndicatorWarning
          background var(--warning)

        .connectionOptionStatusText
          height 20px
          margin-top 5px
          display flex
          align-items center

      .signerOptionSetWrap
        height 25px

      .signerOptionSet
        display flex
        height 21px
        margin-top 5px
        border-radius 10.5px
        letter-spacing 1px
        padding 0px 0px
        justify-content center
        align-items center
        padding 0px 3px 0px 3px
        background var(--ghostD)
        box-shadow cardDrop

        .signerOptionSetButton
          display flex
          justify-content center
          align-items center
          height 20px
          width 25px
          border-radius 10px

          svg
            color var(--outerspace)
            opacity 0.3
            transition var(--standardFast)
            transform translateZ(0)

      .signerOptionSet:hover
        .signerOptionSetButton
          svg
            opacity 0.5

          svg:hover
            opacity 1

.appInfo
  font-size 14px
  font-weight 300
  transition var(--standard)
  transform translateZ(0)
  z-index 20
  padding-bottom 50px

  .appInfoIcon
    transition var(--standard)
    height 30px
    display flex
    justify-content center
    align-items center
    flex-direction column
    transform translateZ(0)

    .appInfoHandle
      width 30px
      height 4px
      border-radius 2px
      background var(--outerspace03)
      transition var(--standard)
      transform translateZ(0)

  .appInfoLine
    left 0
    right 0
    display flex
    justify-content center
    align-items center
    flex-direction column
    transform translateZ(0)
    color var(--outerspace06)

  .appInfoViewLicense
    width 100%
    text-align center
    font-size 11px
    text-transform uppercase
    font-weight 400
    letter-spacing 1px
    margin-top 24px
    color var(--outerspace06)
    cursor pointer

  .appInfoViewLicense:hover
    cursor pointer
    color var(--outerspace08)

  .appInfoLineReset
    margin-top 15px
    margin-left 4px
    text-align center
    font-size 11px
    text-transform uppercase
    font-weight 400
    letter-spacing 1px
    line-height 30px
   
    .appInfoLineResetConfirm
      color var(--outerspace)
      span
        margin-left 15px
    
    .appInfoLineResetButton
      cursor pointer

    .appInfoLineResetButton:hover
      color var(--bad)
      
    .appInfoLineResetConfirmButton
      color var(--outerspace)
      cursor pointer
    
    .appInfoLineResetConfirmButton:hover
      color var(--bad)

  .appInfoLineVersion
    font-family 'FiraCode'
    font-size 13px
  
  .appInfoLineInstanceId
    color var(--outerspace06)
    cursor pointer
    font-family 'VCR'
    font-size 12px
    margin-top 50px
    margin-left 0px
    margin-bottom 52px
    text-transform uppercase
  
  .appInfoLineInstanceId:hover
    color var(--outerspace08)

  .instanceIdCopied
    text-transform uppercase

.connectionCustomInput
  margin-top 0px
  margin-bottom 0px
  height 0px
  opacity 0
  position relative
  padding-top 0px
  transition var(--standardFast)
  background var(--ghostZ)
  border-radius 8px
  transform translateZ(0)
  z-index 20

  input
    position absolute
    top 0
    right 0
    bottom 0
    left 0px
    outline none
    border none
    width 100%
    text-align center
    font-family 'MainFont'
    font-size 16px
    background transparent
    padding 10px
    font-weight 300
    color var(--outerspace)

.connectionCustomInputOn
  margin-top 10px
  margin-bottom 2px
  height 35px
  opacity 1

.signerPermissionNetwork
   padding 0

.mainnetToggleLock
  position absolute
  right 16px
  top 0
  margin-top 22px
  height 20px
  width 40px
  border-radius 12px
  background var(--ghostZ)
  display flex
  justify-content center
  align-items center

  svg
    color var(--outerspace03)

.chainIdBadgeBackground
  position absolute
  right 13px
  top 50%
  margin-top -13px
  height 26px
  width 136px
  border-radius 12px
  background var(--ghostZ)
  display flex
  justify-content center
  align-items center
  cursor pointer
  transition var(--standardFast)
  display none

.chainIdBadge
  position relative
  top 2px
  height 20px
  border-radius 12px
  margin-left 8px
  background var(--ghostB)
  display flex
  justify-content center
  align-items center
  cursor pointer
  transition var(--standardFast)
  padding 0px 8px 0px 6px
  z-index 4
  font-family 'FiraCode'
  font-size 12px
  *
    pointer-events none

  .chainIdBadgeIcon
    color var(--good)
    position relative
    top 0px
    margin-right 6px

.chainSettings
  position absolute
  right 60px
  top 50%
  margin-top -10px
  height 20px
  width 40px
  border-radius 12px
  background var(--ghostC)
  display flex
  justify-content center
  align-items center
  cursor pointer
  transition var(--standardFast)
  *
    pointer-events none

  svg
    transition var(--standardFast)
    color var(--outerspace08)

.chainSettings:hover
  background var(--ghostD)
  svg
    color var(--outerspace)

.networkBreak
  padding 16px 16px 0px 16px
  margin-bottom 8px
  font-size 10px
  text-transform uppercase
  letter-spacing 2px
  font-weight 500
  color var(--outerspace)

.networkBreak:first-child
  padding 0px 16px 0px 16px

.networkAdd
  padding 32px 0px 16px 0px

  .networkAddButton
    font-size 14px
    height 48px
    background var(--ghostB)
    text-align center
    border-radius 24px
    padding 15px
    box-sizing border-box
    text-transform uppercase
    font-weight 400
    letter-spacing 2px
    cursor pointer
    *
      pointer-events none
    
  .networkAddButton:hover
    background var(--ghostC)
    color var(--good)

.chainConfig
  padding 8px
  margin 4px
  border-radius 8px
  position relative
  z-index 99999999
  background var(--ghostA)

  .chainConfigRow
    position relative
    display flex
    justify-content space-between
    margin-bottom 8px
    
    .chainIdInput
      width 80px

    .chainSymbolInput
      width 102px
      text-transform uppercase

    input
      position relative
      height 28px
      background var(--ghostZ05)
      border-radius 8px
      box-sizing border-box
      font-size 13px
      font-weight 400

  .chainConfigRow:last-child
    margin-bottom 0px
    
.chainData
  padding 10px

.chainConfigSave
  cursor pointer
  padding 8px

.chainMore
  cursor pointer
  padding 8px

@import '../Chain/style/index.styl'
